<template>
  <div class="main_box" style="padding-right: 10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ title }}</div>
        </div>
      </div>

      <div id="root"></div>
    </el-card>
  </div>
</template>

<script>
import CameraApi from '../../../api/equip/camera';

export default {
  name: 'CameraAdd',
  data() {
    return {
      title: '',
    };
  },
  mounted() {
    const { equipName } = this.$route.query;
    this.title = equipName;
    this.initializeVideo();
  },
  methods: {
    initializeVideo() {
      const { equipMac, safetyCode } = this.$route.query;
      CameraApi.getKitToken({ deviceId: equipMac, channelId: 0 })
        .then((res) => {
          const player = new imouPlayer({
            id: 'root',
            width: '100%',
            height: 800,
            // 设备序列号
            deviceId: equipMac,
            token: res.data,
            channelId: 0,
            type: 1,
            // 直播 0 高清  1 标清  默认
            streamId: 1,
            // 录播 云录像 1 本地录像 localRecord 默认 云录像
            recordType: 'cloud',
            code: safetyCode || '',
          });
        })
        .catch((err) => {
          if (err === '请重新操作') {
            this.initializeVideo();
          }
        });
    },
    returnList() {
      // 返回上一界面
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/equip/cameraManagement' });
    },
  },
};
</script>

<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>
<style lang="scss"></style>
